<template>
	<div>

		<a-row>
			<a-col span="8">
				<a-row class="mb-2">
					<a-col :span="4">
						<a-button @click="queryProcessList" type="primary" size="small">刷新</a-button>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24">
						<h-table :rowClick="processClick" :data="processTableData" :columns="leftColumns">
						</h-table>
					</a-col>
				</a-row>

			</a-col>

			<a-col span="16">
				<a-row class="mb-2">
					<a-col :span="24">
						<a-button @click="queryProcessVersionList" type="primary" size="small">刷新</a-button>
					</a-col>
				</a-row>

				<a-row>
					<a-col :span="24">
						<h-table :data="processVersionTableData" :columns="rightColumns">
						</h-table>

					</a-col>
				</a-row>
			</a-col>
		</a-row>

		<!--		<a-modal :closable="false" :footer="null" v-model:open="config.processVersionDiag" width="100%">-->
		<!--			<ProcessVersionManager :processId="config.processId" :processVersionCallback="processVersionCallback"/>-->
		<!--		</a-modal>-->

		<a-modal v-model:open="relationParamVisible"
				 @cancel="relationParamVisible = false"
				 @ok="saveRelation"
				 width="100%">
			<a-form :model="relationModel">
				<el-form-item label="入参">
					<div id="jsoneditor" ref="jsonEditor" style="width: 100%; height: 600px;"></div>
				</el-form-item>
			</a-form>
		</a-modal>

		<a-modal v-model:open="processInfoFlag" :footer="null" width="100%">
			<Flow v-if="processInfoFlag" :id="processVersionId"
				  ref="flowRef"
				  :toolbarConfig="toolbarConfig"
				  :componentsViewConfig="componentsViewConfig"
				  :floatToolbarViewConfig="floatToolbarViewConfig"></Flow>
		</a-modal>

	</div>


</template>
<script setup>
import {getCurrentInstance, h, onMounted, ref} from "vue";
import JsonEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';
import processApi from '@/api/process/processApi'
import processRelationApi from '@/api/process/processRelationApi'
import Flow from '@/views/process/engine/index.vue'
import ProcessVersionManager from "@/views/process/ProcessVersionManager.vue";

const props = defineProps(["bizId", "bizType", "repationParamOpenFlag"])

const processTableData = ref([]);

onMounted(() => {
	queryProcessList();

});

const leftColumns = ref([
	{
		title: '名称',
		key: 'processName',
		dataIndex: 'processName',
	},
	{
		title: '编码',
		key: 'processCode',
		dataIndex: 'processCode',
	},
	{
		title: '描述',
		key: 'description',
		dataIndex: 'description',
	},


])

const rightColumns = ref([
	{
		title: '版本',
		key: 'processVersion',
		dataIndex: 'processVersion',
	},
	{
		title: '描述',
		key: 'description',
		dataIndex: 'description',
	},
	{
		title: '最新标记',
		key: 'latestFlag',
		dataIndex: 'latestFlag',
		mapping: [
			{
				key: '1',
				value: 'latest'
			}
		]
	},
	{
		title: '启停状态',
		key: 'disableFlag',
		dataIndex: 'disableFlag',
		mapping: [
			{
				key: '0',
				value: '启用'
			},
			{
				key: '1',
				value: '停用'
			}
		]
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 150,
		fixed: 'right',
		buttonList: [
			{
				click: (field, record) => {
					relation(record)
				},
				render: (row) => {
					return row.relationFlag && (props.repationParamOpenFlag == null || props.repationParamOpenFlag == true) ? "修改" : null;
				}
			},
			{
				type: "primary",
				click: (field, record) => {
					relation(record)
				},
				render: (row) => {
					return !row.relationFlag ? "关联" : null;
				}
			},
			{
				type: "primary",
				click: (field, record) => {
					removeRelation(record)
				},
				render: (row) => {
					return row.relationFlag ? "删除" : null;
				}
			},
			{
				type: "primary",
				click: (field, record) => {
					openProcess(record)
				},
				render: (row) => {
					return "流程"
				}
			},
		]
	},

])

const queryProcessList = async () => {
	processTableData.value = await processApi.queryProcessList({groupId: null});
}

const processVersionTableData = ref([]);
const queryProcessVersionList = async () => {
	if (!processVersionTableData.value) {
		return;
	}
	const data = await processRelationApi.queryProcessVersionRelationList(processId.value, props.bizId, props.bizType);
	// console.log(data);
	// this.$set(this, "tableData", data);
	processVersionTableData.value = data;
}
const processId = ref();
const processClick = (row) => {
	processId.value = row.id;
	queryProcessVersionList();
}
const relationModel = ref({});
const relationParamVisible = ref(false);
const processVersion = ref();

const relationId = ref();
const relation = (row) => {

	relationParamVisible.value = true;
	relationModel.value.params = row.params;
	processVersion.value = row.processVersion;
	relationId.value = row.relationId;

	if (props.repationParamOpenFlag != null && props.repationParamOpenFlag == false) {
		relationParamVisible.value = false;
		saveRelation();
		return;
	}


	if (!editor.value) {
		setTimeout(() => {
			initJsonEditor();
		}, 0);
	} else {
		editor.value.set(JSON.parse(relationModel.value.params));
	}


}

const saveRelation = async () => {

	let jsonFieldValue = null;

	if (editor.value) {
		jsonFieldValue = editor.value.getText();
	}
	await processRelationApi.saveProcessRelationConfig({
		bizId: props.bizId, bizType: props.bizType,
		processId: processId.value,
		processVersion: processVersion.value,
		params: jsonFieldValue,
		id: relationId.value
	});

	relationModel.value = {};
	relationParamVisible.value = false;
	await queryProcessVersionList();
}

const removeRelation = async (row) => {
	await processRelationApi.removeRelation(row.relationId);
	await queryProcessVersionList();
}

const editor = ref();

const initJsonEditor = () => {
	const container = document.getElementById("jsoneditor");

	const options = {
		"modes": ["code", "tree", "form", "text", "preview"],
		"mode": "code"
	}
	editor.value = new JsonEditor(container, options);
	// const initJson = {};
	// editor.value.set(initJson);
	editor.value.set(JSON.parse(relationModel.value.params) || {});

}
const processVersionId = ref();


const flowRef = ref();
const toolbarConfig = ref({
	viewFlag: true,
	clearViewFlag: false,
	saveViewFlag: false,
	saveAndCloseViewFlag: false,
	closeViewFlag: false
})
const componentsViewConfig = ref({
	viewFlag: false
})
const floatToolbarViewConfig = ref({
	viewFlag: false
})

const processInfoFlag = ref(false);
const openProcess = (row) => {
	processInfoFlag.value = true;
	processVersionId.value = row.id;
}
</script>


<style scoped></style>
